<!--  寻失主物页面
  codeslizhi
  @email: 1664234934@qq.com
  @Date: 2022 3 9
-->
<template>
	<view class="u-wrap">
		<cu-custom class="bg-gradual-blue" :isBack="false">
			<block slot="content"> 寻失主 </block>
		</cu-custom>
		
		<view class="cu-bar bg-white search " :style="[{top:CustomBar + 'px'}]"> 
			<u-search placeholder="输入搜索的关键词" v-model="keyword" @search="searchGoods" @custom="searchGoods"></u-search>
		</view>   
			
	
		<view class="pics1">
			<!-- 可滚动区域 -->
			<scroll-view scroll-y scroll-with-animation class="left1" scroll-y>
				<view @click="leftClickHandle(index,item.id)" :class="active===index?'active':''" class="left_viev"
					v-for="(item,index) in cates" :key="item.id">
					{{item.title}}
				</view>
			</scroll-view>

			<!-- 右侧信息页显示 -->
			<scroll-view scroll-y  class="right" @scrolltolower="toLower"> 
				<view class="order"  v-for="item in secondData" :key="item.g_id">  
					<view class="top" @click="goGoodsDetatil(item.id)">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">{{ item.title }}</view>
						</view>
						
					</view> 
					<view style="margin-top: 14rpx;">
						<text class="text-blue">丢失时间：{{getdate(item.create_time)}}</text> 
					</view> 
					<view class="item" @click="goGoodsDetatil(item.id)">
						<view class="left">       
							<image :src="item.img_url ? item.img_url[0] : ''" mode="aspectFill"></image>         
						</view>  
						<view class="content"> 
							<view class="title u-line-2 text-bold">{{ item.imgdesc}}</view> 
							<!-- <view class="type">{{ res.imgdesc }}</view> -->
							<!-- <view class="delivery-time">失主： {{ item.claim_name }}</view> --> 
						</view>
					</view>
					<u-line color="#f1f1f1" margin="24rpx 0 0 0"></u-line>
					<view class="bottom">
						<view>
							<!-- <view class="cu-avatar-group" style="padding-left: 24rpx;">
								<view class="cu-avatar round" v-for="(item,index) in avatar" :key="index"
									:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
							</view> -->
							<text class="text-blue text-shadow" style="padding-top: 36rpx;display: inline-block;" v-if="item.status == 0">状态:待审核</text> 
							<text class="text-blue text-shadow"  style="padding-top: 36rpx;display: inline-block;" v-if="item.status == 1">状态:待认领</text>    
							<text class="text-blue text-shadow" style="padding-top: 36rpx;display: inline-block;" v-if="item.status == 2">状态:已完成</text>    
							<text class="text-blue text-shadow" style="padding-top: 36rpx;display: inline-block;" v-if="item.status == 3">状态:审核失败</text>    
						</view>

						<view class="btnBox"> 
							<view @click="getClaim(item.id,item.title)" class="evaluate btn">认领</view>
						</view>
						
					</view> 
					</view>
					<u-loadmore @loadmore="toLower" :status="loadStatus" icon-color="#2979ff"
										color="#2979ff" />
				<view>
					<text v-if="secondData.length == 0">暂无数据</text> 
				</view>
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates: [],
				active: 0,
				secondData: [],
				keywords:[],
				total: 0,
				pageSize: 10,
				keyword:"",//搜索关键字
				page:0,//请求页面
				loadStatus: "loadmore",//请求下拉到底部的节流阀
			}
		},
		methods: {
			
			getClaim(id,title) {  
				// console.log(id) 
				uni.navigateTo({
					url: '/pages/Claim/index?id=' + id + '&title=' + title  
				})
			},
			searchUserByKey(value) {
				// this.loadInfo()
				this.$u.toast('搜索内容为：' + value)
			},
			phone() {
				uni.makePhoneCall({
					phoneNumber: '该手机号'
				})
			},
			async getPicsCate() {
				const res = await this.$httpTokenRequest({
					url: ':8022/o/v1/category', 
					method: 'GET'
				})
				console.log(res.data.data.data); 
				this.cates = res.data.data.data;
				this.leftClickHandle(0, this.cates[0].id)
			}, 
			async leftClickHandle(index, g_id) {
				console.log("id:" + g_id) 
				this.active = index
				// 获取右侧的数据
				const res = await this.$httpTokenRequest({
				 url: ":8022/o/v1/order?type=2",
       			 method: "GET",		 
				})
				console.log(res.data.data.data);
				this.secondData = res.data.data.data; 
				console.log(this.secondData)
			},
			previewImg(current) {
				const urls = this.secondData.map(item => {
					return item.imgurl
				})
				console.log(urls) 
				// 预览图片
				uni.previewImage({
					current,
					urls
				})
			},
			// 导航到物品详情页
			goGoodsDetatil(id) { 
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id=' + id
				})
			},
			getdate(strDate1) {
				const date = new Date(strDate1)
				var strDate = date.getFullYear() + '年' 
				strDate += date.getMonth() + 1 + '月'
				strDate += date.getDate() + '号'
				// strDate += date.getHours()  
				// strDate += date.getMinutes() + ':' 
				// strDate += date.getSeconds()
     			return strDate 
			},
			current1(e) {
				this.current1 = e.current1;
			},
			// 搜索商品数据
			async searchGoods() {
				const res = await this.$httpTokenRequest({
					url: ':8022/o/v1/order?type=2&title=' + this.keyword, 
					method: 'GET'
				})
				this.secondData = res.data.data.data; 
				// console.log(res.data.data.data);
				// this.current = 0
				// this.page = 0
				// // 先初始化页数和加载状态
				// this.getGoodsData()
			},
			//底部懒加载刷新
			async toLower() {
				if (this.loadStatus !== "nomore") {
					this.loadStatus = "loading"
					this.page++
					console.log(this.page);
					const res = await this.$httpTokenRequest({
						url: ':8022/o/v1/order?type=2&status=1&page=' + this.page,   
						method: 'GET'
					}) 
					console.log(res.data.data.data.length);
					this.secondData.push(...res.data.data.data) 
					this.loadStatus = "loadmore"
					if (res.data.data.data.length < 10) { //没有更多数据了
						this.loadStatus = "nomore" 
					}
				}
			}
		},
		onLoad() {
			this.getPicsCate()
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	
	.u-search-box {
		padding: 18rpx 30rpx;
	}
	
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}
	
	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
	
	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}
	
	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}
	
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.right-box {
		background-color: rgb(250, 250, 250);
	}
	
	.page-view {
		padding: 16rpx;
	}
	
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}
	
	.item-title {
		font-size: 30rpx;
		color: $u-main-color;
		font-weight: bold;
		margin: 10rpx 0;
	}
	
	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}
	
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	
	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
	}
	.btnBox {
		margin-top: -39rpx;
		margin-left: 250rpx;
		width: 150rpx;
		display: flex;
		justify-content: end;

		.btn {
			line-height: 52rpx;
			width: 140rpx;
			border-radius: 12rpx;
			border: 2rpx solid $u-tips-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-tips-color;
		}

		.evaluate {
			color: $u-type-primary;
			border-color: $u-type-primary;
		}
	}

	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		// height: calc(100vh - var(--window-top));
		height: calc(100% - env(safe-area-inset-bottom));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: $u-main-color;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
	}

	page {
		height: 100%;
	}

	.right .order {
		width: 570rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx; 
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		z-index: 6;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;

				.progressBox {
					width: 150rpx;
					float: right;
				}
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 260rpx;
					height: 190rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 45rpx;
				}

				.type {
					margin: 6rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.delivery-time {
					color: #0081ff;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			// line-height: 70rpx;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;

			.btnBox {
				
				width: 270rpx;
				display: flex;
				justify-content: end;

				.btn {
					// line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
					justify-content: end !important;
				}

				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
	.right>.order:last-child {
		margin-bottom: 100px;
		color: red !important;
	} 
	.pics1 {
		flex: 1;
		display: flex;
		overflow: hidden;
		.left1 {
			width: 200rpx;
			height: 100%;
			border-right: 1px solid #eee;
			.left_viev {
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}

			// 选中颜色
			.active {
				// background: linear-gradient(45deg, #ffd23c, #ffd23c);
				background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
				color: #ffffff; 
			}
		}
	}	
	.pagination {
		overflow: hidden;
		margin-bottom: 500px; 
	}
	.cu-bar {
		position: initial;
	}
	.bg-gradual-blue {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
		color: #ffffff; 
	}
</style>
